<template>
  <view class="w-210rpx h-164rpx bg-linear-5 overflow-hidden relative mb-12rpx"
    :class="[
      { 'scale-12': selectPackageId === data.id }, 
      { '!w-160rpx !h-130rpx': status === 'vip' },
    ]"
    :style="itemWrapStyle"
    @click="handleClick"
  >
    <!-- bg-#FEEDC0 -->
     <!-- color-#2E1305 -->
    <view class="pt-32rpx font-size-40rpx leading-47rpx color-#fff text-center">
      ￥{{ data.price || 0 }}
    </view>
    <view class="pt-6rpx font-size-24rpx leading-28rpx color-#fff text-center"
      v-if="status === 'package' && data.give"
    >赠送{{ data.give || 0 }}</view>

    <view class="text-center pt-6rpx font-size-24rpx leading-28rpx"
      v-if="status === 'vip' && data.give"
    >
      <wd-text
        :text="data.give || 0"
        color="#f1f1f1"
        mode="price"
        decoration="line-through"
      />
    </view>

    <!-- 套餐 -->
    <view class="name-wrap px-10rpx h-34rpx flex-center color-white absolute right-8rpx top-0 bg-#2E1305 font-size-22rpx leading-34rpx">
      {{ data.name || '--' }}
    </view>
    
    <!-- 背景左边的圆点 -->
    <view class="dot-wrap h-full w-24rpx">
      <view 
        class="w-full h-24rpx bg-white rounded-full" 
        :class="[{ 'dark-color': themeConfig.theme === 'dark' }, dotClass]"
        v-for="item in 3" 
        :key="item"
      ></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useThemeStore } from '@/store';

const emit = defineEmits(['handleClick']);
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  selectPackageId: {
    type: String,
    default: ''
  },
  status: {
    type: String,
    default: 'package' // package-充值套餐, vip-会员套餐
  },
  dotClass: {
    type: String,
    default: ''
  },
  itemWrapStyle: {
    type: Object,
    default: () => ({})
  },
})
// 主题颜色
const { themeConfig } = useThemeStore();

const handleClick = () => {
  emit('handleClick', props.data);
}
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
.dot-wrap {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.name-wrap {
  border-radius: 0 0 18rpx 18rpx;
}

.scale-12 {
  transform: scale(1.1);
}
</style>
